import React, { Component } from 'react'

import {connect} from 'react-redux'
let hotArr = ['常吃','偶尔','不吃'];

interface Iprops{
    t_id:number,
    title:string,
    img:string,
    energy:string,
    habit:string,
    type:string,
    changeHotbit:(cType:string,t_id:number,hobit:string)=>void
}

interface Istate{
    isShow:boolean
}

class Item extends Component<Iprops,Istate> {
    state = {
        isShow:false
    }
    render() {
        let {title,type,t_id,habit} = this.props;
        let {isShow} = this.state;
        return (
            <div>
                <span>{title}</span>
                <div style={{display:isShow ?'block':'none'}}>
                    {hotArr && hotArr.map(item => <span key={item} onClick={() => {
                        this.props.changeHotbit(type,t_id,item);
                        this.setState({
                            isShow:false
                        })
                    }}>{item}</span>)}
                </div>
                <span onClick={()=>{
                    this.setState({
                        isShow:true
                    })
                }}>*{habit}</span>
            </div>
        )
    }
}

export default connect(() => {return {}},(dispatch:any) => {
    return {
        changeHotbit(cType:string,t_id:number,hobit:string){
            dispatch({type:'CHANGE_HOT',cType,t_id,hobit})
        }
    }
})(Item)
